<template>
  <div>
    <p>这是文章页面</p>
    <p>文章ID:{{ $route.params.id }}</p>
    <p>文章ID来自计算属性:{{ pageId }}</p>
    <el-button type="primary" size="small" @click="jumpBack"
      >点击事件返回上一页</el-button
    >
    <el-button type="primary" size="small" @click="jumpother"
      >进入另一篇文章</el-button
    >
    <p>{{ content }}</p>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watchEffect } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
const router = useRouter();
const route = useRoute();
const pageId = computed(() => {
  return route.params.id;
});
const content = ref("");
const jumpBack = () => {
  router.go(-1);
};
const jumpother = () => {
  router.push("/artcle/3333");
};
// 第一种获取数据：例如从 /user/foo 导航到 /user/bar这种情况,在这里面获取文章数据，主页也会触发，就不要在onMounted获取数据，全部都在这里面获取数据
watchEffect(() => {
  console.log("pageId: ", pageId.value);
});
//  第二种获取数据：例如从 /user/foo 导航到 /user/bar这种情况,在这里面获取文章数据，主页 才进入不会触发，在onMounted获取数据
onBeforeRouteUpdate((to) => {
  console.log("onBeforeRouteUpdate", to.params.id);
});
onMounted(() => {
  console.log(
    "mounted:可以在这里面请求数据,但是例如从 /user/foo 导航到 /user/bar这种情况不会触发,就要watch里面请求"
  );
});
</script>

<style lang="scss" scoped></style>
